  <template>
  <div>
    <el-table :data="tableData" style="width: 100%" class="his">
        <el-table-column prop="productname.name" label="物品名称" @click="todetail(productname.id)" width="180">
        </el-table-column>
        <el-table-column prop="viewtime" label="浏览时间" width="180">
        </el-table-column>
        <el-table-column prop="productname.description" label="简介" width="300">
        </el-table-column>

    </el-table>
            <el-pagination background :page-size="pageSize" layout="prev, pager, next" :total="total"
            @current-change="changePage"></el-pagination>
  </div>
</template>

  <script>
  import { getHistoryApi } from '../api/GetHistory'
  
  export default {
      data() {
          return {
            pageSize: 5, //每页显示5条
            total: 0, //总条数
            pageNo: 1, //默认当前页码第1页
            searchParams: {
                orderId: "", // 搜索框
                state: ""
            },
              tableData: [],
  
          }
      },
      methods: {
        changePage(val) {
            //val:改变页码当前的页码
            this.pageNo = val;
            this.getTable(); //根据新的页码选取分页数据
        },
          getTable() {
              getHistoryApi({
                  "id": JSON.parse(window.sessionStorage.getItem("user")).id,
                   pageNo: this.pageNo,
                     pageSize: this.pageSize,
              }).then(resp => {
                  console.log(resp);
                  this.tableData = resp.records;
                  this.total = resp.total;
              })
          }
      },
      todetail(id) {
          this.$router.push({
              path: '/detail',
              query: {
                  id: id
              }
          })
      },
      created() {
          this.getTable();
      }
  }
  </script>
  <<style scoped>
  .his{
    background-color: #f8f8f8;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    width: 100%;
    vertical-align: middle;
  }
  </style>